<template>
	<view class="msg_page">
		<NavigationTitle title="消息" style="color: #000;background: #fff;position: fixed;width: 100%;z-index: 5;">
			<template slot="left_con">
				<uni-icons type="eye-filled" size="30" @click="readAll()"></uni-icons>
			</template>
			<template slot="right_con">
				<uni-icons type="settings" size="30" @click="showDrawer()"></uni-icons>
			</template>
		</NavigationTitle>
		<view class="status-bar"></view>
		<view class="page_top"></view>
		<scroll-view class="msgList" scroll-y="true" refresher-enabled="true" @refresherrefresh="doRefresh"
			@scrolltolower="scrolltoupper" :refresher-triggered="pullLoading">
			<view v-if="msgList.length==0" class="noData">暂无数据</view>
			<!-- <text id="a"></text> -->
			<uni-swipe-action ref="swipeDom">
				<uni-swipe-action-item  class="msg_item" :disabled="item.messageStatus=='2'" :threshold="0" :right-options="options2" @click="(e)=>bindClick(e,item.messageId)" v-for="item in msgList" :key="item.messageId">
					<view class="item_left" @click="()=>goDetail(item)">
						<view class="content">{{item.messageContent||''}}</view>
						<view class="senderName">发送人:{{item.senderName||''}}</view>
						<text class="date">{{item.messageDate||''}}</text>
					</view>
					<view class="item_mask" :style="item.messageStatus=='1'?'background: linear-gradient(to left, #eee, red)':'background: linear-gradient(to left, #eee, deepskyblue)'" ></view>
					<!-- <view class="item_mask" style=";" v-if="item.messageStatus=='2'"></view> -->
				</uni-swipe-action-item>
			</uni-swipe-action>
			<uni-load-more :status='loadStatus' v-if="msgList&&msgList.length>8"></uni-load-more>
		</scroll-view>
		<uni-drawer ref="showLeft" mode="left" :width="320">
			<view class="status-bar"></view>
			<view class="drawerLeft">
				<uni-forms ref="baseForm" :modelValue="searchValue" label-position="top" class="baseForm">
					<uni-forms-item label="消息状态:">
						<uni-data-select
						        v-model="searchValue.msgStatus"
						        :localdata="[
									{ value: 1, text: '未读' },
									 { value: 2, text: '已读' },
								]"
								placeholder="请选择项目状态"
						      ></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="消息类型:">
						<uni-data-select
						        v-model="searchValue.messageType"
						        :localdata="[
									{ value: 1, text: '设备告警' },
									 { value: 2, text: '流程通知' },
								]"
								placeholder="请选择项目状态"
						      ></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="开始时间:" >
						<uni-datetime-picker type="datetime" v-model="searchValue.beginTime" placeholder="请选择时间"/>
					</uni-forms-item>
					<uni-forms-item label="结束时间:" >
						<uni-datetime-picker type="datetime" v-model="searchValue.endTime" placeholder="请选择时间"/>
					</uni-forms-item>
				</uni-forms>
				<view class="popupBtn">
					<button type="primary" @click="drawerConfirm" class="btn">确定</button>
					<button type="reset" @click="drawerClose" class="btn">重置</button>
				</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import NavigationTitle from '@/components/navigationTitle'
	import {
		showToastMsg,
		showModalMsg,
	} from '@/utils/format.js'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		components: {
			NavigationTitle
		},
		computed: {
			...mapGetters(['project', 'projectId', 'authorList'])
		},
		data() {
			return {
				searchValue: {},
				options2: [{
						text: '标记已读',
						style: {
							backgroundColor: '#007aff'
						}
					}
				],
				msgList: [],
				page: {
					current: 1,
					size: 10,
				},
				pullLoading: false,
				loadingType: 0, //加载状态
				isLoadingMore: false, // 是否正在加载更多
				loadStatus: 'more', // 是否还有更多数据
			}
		},
		// onLoad(){
		// 	this.getMsgList(this.page)
		// },
		onShow() {
			this.msgList = []
			this.getMsgList({
				current: 1,
				size: 10,
			})
			uni.hideTabBarRedDot({
			  index: 2
			})
		},
		methods: {
			...mapActions(['save_msgData']),
			readAll(){
				let arr = [],that = this
				this.$refs.swipeDom.closeAll()
				showModalMsg('', '是否标记为全部已读', async (val) => {
					if (val) {
						if(this.msgList.length>0){
							this.msgList.map(v=>{
								if(v.messageStatus!=2){
									arr.push({
										messageId:v.messageId,
										msgStatus:"2"
									})
								}
							})
						}
						that.read(arr)
					}
				
				})
				
			},
			bindClick(e,id) {
				if(id){
					let arr = [
						{
							messageId:id,
							msgStatus:"2"
						}
					]
					this.read(arr)
				}
				
			},
			showDrawer() {
				if (this.radioKey == 1 ||this.radioKey == 2	) return
				this.$refs['showLeft'].open()
			},
			// 关闭窗口
			closeDrawer() {
				this.$refs['showLeft'].close()
			},
			drawerConfirm() {
				// this.$refs.baseForm.validate().then(res=>{
				// 	console.log(res)
				// })
				this.getMsgList({
					current: 1,
					size: 10,
				}, this.searchValue)
				this.closeDrawer()
			},
			drawerClose() {
				this.searchValue = {}
				this.getMsgList({
					current: 1,
					size: 10,
				}, null)
				this.closeDrawer()
			},
			goDetail(data) {
				this.save_msgData(data)
				uni.navigateTo({
					url: '/pages/message/detail'
				})
			},
			scrolltoupper() {
				let page = {
					current: this.page.current + 1,
					size: 10,
				}
				this.page = page
				this.getListMore(page)
			},
			doRefresh() {
				// console.log('shuaxin')
				this.pullLoading = true;
				// 执行数据刷新的逻辑
				if (!this.pullLoading) return
				let page = {
					current: 1,
					size: 10,
				}
				this.page = page
				this.getMsgList(page)
			},
			backSelf() {
				uni.navigateBack({
					delta: 1
				})
			},

			async getMsgList(page,value) {
				let that = this
				let param = {}
				if (!this.projectId) this.backSelf()
				if (value) {
					for (let key in value) {
						param[key] = value[key]
					}
				}
				param.pageNum = page.current
				param.pageSize = page.size
				param.projectId = this.projectId
				await this.$api.getMessageList(param).then(res => {
					if (res?.code == 200) {
						this.msgList = res.data.data
						this.page = page
						this.loadingType = 0;
					}

				}).catch(err => {
					console.log(err)
				})
				setTimeout(() => {
					that.pullLoading = false;
				}, 500)


			},
			async getListMore(page) {
				if (this.loadingType !== 0) return
				this.loadStatus = "loading"
				uni.showLoading({
					title: "加载中...",
					mask: true
				})
				this.loadingType = 1
				let param = {}
				param.pageNum = page.current
				param.pageSize = page.size
				param.projectId = this.projectId
				await this.$api.getMessageList(param).then(res => {
					if (res?.code == 200) {
						if (res.data.data.length == 0) {
							this.loadingType = 2;
							this.loadStatus = "noMore"
							return
						} else if (res.data.data.length < 10) {
							this.loadingType = 2;
							this.loadStatus = "noMore"
						} else {
							this.loadingType = 0;
							this.loadStatus = "more"
						}
						this.msgList = this.msgList.concat(res.data.data)
						uni.hideLoading()
					}
				})
			},
			async read(data) {
				uni.showLoading({
					title: "加载中...",
					mask: true
				})
				await this.$api.updateMessage(data).then(res => {
					if (res?.code == 200) {
						this.getMsgList(this.page)
					}
					showToastMsg(res.msg)
					
				}).catch(err => {
					showToastMsg('请求失败！')
				})
				this.$refs.swipeDom.closeAll()
				uni.hideLoading()
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/global.scss';

	view {
		box-sizing: border-box !important;
	}

	.msg_page {
		position: relative;
		height: 100%;
	}

	// .page_top {
		
	// 	margin-bottom: 24rpx;
	// }

	.msgList {
		padding: $System__title_height 0 0;
		height: 90vh;
		position: relative;
		/deep/ .uni-scroll-view-content {
			padding: 24rpx 24rpx 50rpx;
			box-sizing: border-box !important;
		}

		.noData {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: #999;
		}

		.msg_item {
			background-color: #eee;
			margin-bottom: 24rpx;
			border-radius: 20rpx;
			box-shadow: 0rpx 5rpx 10rpx 0rpx #F0F0F0;
			position: relative;
			.item_left {
				padding: 24rpx;
				.content {
					font-size: 32rpx;
					margin-bottom: 12rpx;
					min-height: 90rpx;
				}
				.senderName{
					color: #999;
					font-size: 28rpx;
				}
				.date {
					color: #999;
					font-size: 28rpx;
				}
			}

			.item_mask{
				position: absolute;
				background-color: red;
				left: 0;
				top: 0;
				width: 150rpx;
				height: 100%;
				background:linear-gradient(to left, #eee, red);
				opacity: 0.1;
			}

		}
	}

	.back_icon {
		width: 37rpx;
	}
	.drawerLeft {
		padding: 20rpx;
	
		.baseForm {
			padding: 20rpx 0;
			min-height: 50vh;
		}
	
		.popupBtn {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
	
			.btn {
				width: 45%;
			}
		}
	}

	.userAdd {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		position: fixed;
		bottom: 200rpx;
		right: 50rpx;
	}
</style>